<template>
  <div ref="container" class="scene-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as dat from "dat.gui";
// import { useMouse } from "@vueuse/core";
import * as CANNON from "cannon-es";
console.log("CANNON", CANNON);

onMounted(() => {});
/**
 * 认识point
 */
// 给当前组件定义名称
defineOptions({
  name: "ThreeScene",
});

const container = ref<HTMLElement>();
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let controls: OrbitControls;
let sphere: THREE.Mesh;
let plane: THREE.Mesh;
let spotLight: THREE.SpotLight;
let smallBall: THREE.Mesh;
let points: THREE.Points;
let cubeGroup: THREE.Group;
let sjxGroup: THREE.Group;
let smallBallGroup: THREE.Group;
let shadowGroup: THREE.Group;
//设置时钟
let clock = new THREE.Clock();
let geometry: THREE.BufferGeometry;
let material: THREE.ShaderMaterial;
let cube: THREE.Mesh;

// 初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(0, 0, 5);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.value?.appendChild(renderer.domElement);
  /* 顶点着色器 */
  const vertexShader = `
    varying vec3 vPosition;

    void main() {
        vPosition = position;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
    `;
  /* 片元着色器 */
  const fragmentShader = `
    varying vec3 vPosition;
    uniform float uTime;
    uniform sampler2D uTexture;//纹理
    void main() {
        // gl_FragColor = vec4(abs(vPosition), 1.0);

        // float r = abs(sin(uTime + vPosition.x));
        // float g = abs(sin(uTime + vPosition.y));
        // float b = abs(sin(uTime + vPosition.z));
        // gl_FragColor = vec4(r, g, b, 1.0);

        vec2 uv = vec2(vPosition.x, vPosition.y) * 0.5 + 0.5;
        vec4 textureColor = texture2D(uTexture, uv);
        gl_FragColor = mix(textureColor, vec4(0.0, 0.0, 1.0, 1.0), abs(sin(uTime)));
    }
    `;
  //创建纹理
  const texture = new THREE.TextureLoader().load(
    "/textures/PNG (Black background)/magic_03.png"
  );

  material = new THREE.ShaderMaterial({
    vertexShader, //顶点着色器
    fragmentShader, //片元着色器
    uniforms: {
      //uniforms 是 Three.js 中传递给着色器的全局变量
      uTime: { value: 0.0 }, //传递变量
      uTexture: { value: texture }, //传递纹理
    },
  });

  const geometry = new THREE.BoxGeometry();
  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  // 添加轨道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.5;

  animate();
};

// 动画循环函数
const animate = () => {
  requestAnimationFrame(animate);
  material.uniforms.uTime.value += 0.02;
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  controls.update();
  renderer.render(scene, camera);
};

// 处理窗口大小变化
const handleResize = () => {
  if (camera && renderer) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
};

// 组件挂载时初始化
onMounted(() => {
  initScene();
  window.addEventListener("resize", handleResize);
});

// 组件卸载时清理
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped>
.scene-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
